<template>
    <div>
        <el-form label-position="left" label-width="100px" v-model="visualMapP">
            <el-form-item label="显示">
              <el-radio v-model="visualMapP.show" :label="true">是</el-radio>
              <el-radio v-model="visualMapP.show" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item  label="方向">
               <el-select v-model="visualMapP.orient" placeholder="horizontal" size="mini">
                <el-option label="水平" value="horizontal"/>
                <el-option label="垂直" value="vertical"/>
              </el-select>
            </el-form-item>
            <el-form-item label="颠倒">
              <el-radio v-model="visualMapP.inverse" :label="true">是</el-radio>
              <el-radio v-model="visualMapP.inverse" :label="false">否</el-radio>
            </el-form-item>
            <el-form-item label="距左侧">
               <el-input v-model="visualMapP.left" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距右侧">
               <el-input v-model="visualMapP.right" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距顶部">
               <el-input v-model="visualMapP.top" size="mini"></el-input>
            </el-form-item>
            <el-form-item label="距底部">
               <el-input v-model="visualMapP.bottom" size="mini"></el-input>
            </el-form-item>
            <el-form-item  label="宽度">
                <el-input-number v-model="visualMapP.itemWidth" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="高度">
                <el-input-number v-model="visualMapP.itemHeight" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item  label="间距">
                <el-input-number v-model="visualMapP.itemGap" :min="0" size="mini"/>
            </el-form-item>
            <el-form-item
              v-for="(piece, index) in visualMapP.pieces"
              :label="'区间' + (index + 1)"
              :key="piece.key">
              <el-input-number v-model="piece.min" size="mini"/>
              <el-input-number v-model="piece.max" size="mini"/>
              <el-color-picker v-model="piece.color" show-alpha size="small"></el-color-picker>
              <el-button @click.prevent="removePiece(piece)" size="small">删除</el-button>
            </el-form-item>
            <el-button @click="addPiece">新增区间</el-button>
        </el-form>
    </div>
</template>

<script>

export default {
  data: function () {
    return {
    }
  },
  methods: {
    addPiece () {
        this.visualMapP.pieces.push({
          min: 0,
          max: 0,
          color: '#aaa',
          key: Date.now()
        })
    },
    removePiece (item) {
        var index = this.visualMapP.pieces.indexOf(item)
        if (index !== -1) {
          this.visualMapP.pieces.splice(index, 1)
        }
      }
  },
  computed: {
    visualMapP () {
      return this.$store.state.layout[this.$store.state.activeArrayIndex].SlideContent[this.$store.state.insideActiveArrayIndex].itemContent.detail.visualMapP
    }
  },
  watch: {
  },
  components: {
  }
}
</script>

<style scoped>
    .el-form-item {
        margin-bottom: 0px
    }
</style>
